<template>
    <ph-layer :animate="true" :visible="visible">
        <transition name="ph-scalein">
            <div v-show="visible" class="ph-modal" @click.stop>
                <header class="ph-modal-header">{{title}}</header>
                <div class="ph-modal-body">
                    {{content}}
                </div>
                <ph-button-group :container="true" :justify="actionAlign">
                    <slot name="action"></slot>
                </ph-button-group>
            </div>
        </transition>
    </ph-layer>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import {PhLayer,PhButtonGroup} from '../base'

export default defineComponent({
    props:{
        title:{type:String,default:"系统提示"},
        content:{type:String},
        type:String,
        visible:Boolean,
        "action-align":{
            type:String,
            default:"flex-end"
        }
    },
    components:{PhLayer,PhButtonGroup}
})
</script>

<style lang="scss">
    .ph-modal{
        font-size:var(--phx);
        color: var(--ph-c);
        display: flex;
        flex-direction: column;
        flex:0 0 auto;
        background-color: #FFF;
        box-shadow: 1px 1px 20px rgb(0 0 0 / 20%);
        overflow: hidden;
        border-radius: 8px;
        
        min-width: var(--ph-modal-width);
        max-width: var(--ph-modal-max-width);
        &-body{
            padding: var(--ph-10) var(--ph-15);
            flex: 1;
            overflow: auto;
        }
        &-header{
            flex: 0 0 auto;
            border-bottom: 1px solid var(--ph-bd-light);
            color: var(--ph-c);
            background-color: var(--ph-light-l1);
            overflow: hidden;
            text-align: center;
            padding: var(--ph-10) var(--ph-15);
        }
        .ph-btn-container{
            padding: 0 var(--ph-15) var(--ph-10);
            margin-bottom: 0;
        }
    }
</style>